<template>
    <section v-loading="firstLoading" style="height:100%;">
        <el-table
            stripe
            border
            :data="dataList"
            v-loading="loading"
            v-if="dataList.length"
        >

            <el-table-column prop="name" :label="$t('common.label.customer')" show-overflow-tooltip>
                <template slot-scope="{row}">
                    <el-button 
                        type="text" 
                        @click="openNewTab(row)"
                    >
                        {{row.name}}
                    </el-button>
                </template>
            </el-table-column>

            <el-table-column v-if="_isShowCustomerTag" prop="esTenantTagList" :label="$t('common.label.customerTag')" :formatter="formatterTags" show-overflow-tooltip />

            <el-table-column prop="serialNumber" :label="$t('common.label.customerSerialNumber')" show-overflow-tooltip />

            <el-table-column prop="mainLinkman.name" :label="$t('common.label.contact')" show-overflow-tooltip />

            <el-table-column prop="mainLinkman.phone" :label="$t('common.label.phone')" show-overflow-tooltip />

            <el-table-column :label="$t('common.label.area')" :formatter="formatterAddress" show-overflow-tooltip />

            <el-table-column prop="mainAddress.adAddress" :label="$t('common.label.addressDetail')" show-overflow-tooltip />

        </el-table>

        <NoAuth v-if="!firstLoading && !dataList.length"/>

        <Pagination 
            v-model="page"
            @handleSizeChange="initData"
            @handleCurrentChange="initData">
        </Pagination>
    </section>
</template>

<script>
// 翻页组件
import Pagination from '../Pagination.vue'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { openAccurateTab } from '@src/util/platform'

// 暂无数据组件
import NoAuth from '../NoAuth.vue'

import * as HomeApi from "@src/api/HomeApi";
/* mixin */
import { VersionControlCustomerMixin } from '@src/mixins/versionControlMixin'

import { fmtDist } from '@src/util/addressUtil';

export default {
    name:'tabPaneCustomer',
    mixins: [VersionControlCustomerMixin],
    data(){
        return {
            loading:false,

            // 用于解决第一次进入直接展示暂无数据再展示数据的bug
            firstLoading:true,
            
            page:{
                total:0,
                pageSize:10,
                pageNum:1
            },
            dataList:[]
        }
    },
    props:{
        user:{
            type:Object,
            required:true
        },
        userId:[String,Number]
    },

    components:{
        Pagination,
        NoAuth
    },

    mounted(){
        this.initData();
    },

    methods:{

        initData(){
            const { pageSize, pageNum } = this.page;

            const params = {
                pageSize,
                page:pageNum,
                customerManager:this.userId
            }

            this.loading = true;
            HomeApi.getCustomertList(params).then((res) => {
                const { data:{ list = [],total = 0 }, status } = res;
                this.dataList = list || [];
                this.page.total = total;

                this.loading = false;
                this.firstLoading = false
            }).catch(e=>{
                this.loading = false;
                this.firstLoading = false
            })
        },

        openNewTab({uuid}){
            const fromId = window.frameElement.getAttribute('id');

            // this.$platform.openTab({
            //     id: `customer_view_${uuid}`,
            //     title: '客户详情',
            //     close: true,
            //     url: `/customer/view/${uuid}?noHistory=1`,
            //     fromId,
            // })
            openAccurateTab({
                type: PageRoutesTypeEnum.PageCustomerView,
                key: uuid,
                params: 'noHistory=1',
                fromId
            })
        },

        formatterTags(row){
            const { esTenantTagList = []} = row;
            let tags = [];

            esTenantTagList.map(tag =>{
                tags.push(tag.tagName)
            })

            return tags.join(',')
        },

        formatterAddress(row){
            const { mainAddress = {}} = row;

            return fmtDist(mainAddress);
        },
    }
}
</script>

<style lang="scss" scoped>
.el-table{
    border-top:1px solid #E8E8E8;
    border-left:1px solid #E8E8E8;
}
</style>

